<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">

</div>
<!--在这里写你的内容-->

<body id="test" th:fragment="content">
<div class="panel" style="padding: 10px">
    <div class="panel-heading">
        <h3 class="panel-title">查看医院信息</h3>
    </div>
    <div class="panel-body">
        <div style="text-align: right">
            编号：<input id="searchId" type="text" class="form-control" style="width: 100px;display: inline">
            <button id="search" class="btn btn-default">搜索</button>
        </div>
        <table id="table" class="table table-striped table-hover">
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>医院级别</th>
                <th>地址</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr th:each="hospital:${hospitals}">
                <td style="width: 10%" th:text="${hospital.id}"></td>
                <td style="width: 20%" th:text="${hospital.name}"></td>
                <td style="width: 10%" th:text="${hospital.grade}"></td>
                <td style="width: 20%" th:text="${hospital.address}"></td>
                <td style="width: 20%" th:text="${hospital.phoneNumber}"></td>
                <td style="width: 10%">
                    <nobr>
                        <button th:id="'del'+${hospital.id}" class="btn btn-success btn-sm" style="padding: 6px"
                                th:data-id="${hospital.id}" data-target="#detailModal" data-toggle="modal">详情
                        </button>
                        <button th:id="'edit'+${hospital.id}" class="btn btn-primary btn-sm" style="padding: 6px"
                                th:data-id="${hospital.id}" data-target="#editModal" data-toggle="modal">编辑
                        </button>
                        <button th:id="'del'+${hospital.id}" class="btn btn-danger btn-sm" style="padding: 6px"
                                th:data-id="${hospital.id}" data-target="#delModal" data-toggle="modal">删除
                        </button>
                    </nobr>
                </td>
            </tr>

            </tbody>

        </table>
        <div id="paginationBar" style="text-align: center; bottom: 0%; position: center">
            <ul id="pageLimit"></ul>
        </div>
    </div>
</div>


<!-- END FILTER COLUMN -->

<!-- 删除-模态框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="delModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idDel" type="text" class="hidden">
                <p>确定删除？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToDel" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 编辑-模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idValue" type="text" class="hidden">
                <form name="update_health_info">
                    <div>
                        <div class="box-body col-md-6">
                            <label for="id">医院编号</label>
                            <input id="id" type="text" class="form-control" placeholder="输入医院编号" readonly="readonly">
                            <br>
                            <label for="name">医院名称</label>
                            <input id="name" type="text" class="form-control" placeholder="输入医院名称">
                            <br>
                            <label for="nature">nature</label>
                            <input id="nature" type="text" class="form-control" placeholder="输入nature">
                            <br>
                            <label for="hospitalType">医院类型</label>
                            <input id="hospitalType" type="text" class="form-control" placeholder="输入医院类型">
                            <br>
                            <label for="grade">医院级别</label>
                            <input id="grade" type="text" class="form-control" placeholder="输入医院等级">
                            <br>
                            <label for="phoneNumber">联系电话</label>
                            <input id="phoneNumber" type="text" class="form-control" placeholder="输入联系电话">
                            <br>
                        </div>
                        <div class="box-body col-md-6">
                            <label for="address">地址</label>
                            <input id="address" type="text" class="form-control" placeholder="输入地址">
                            <br>
                            <label for="addressProvince">所在省份</label>
                            <input id="addressProvince" type="text" class="form-control" placeholder="输入医院所在省份">
                            <br>
                            <label for="addressCity">所在城市</label>
                            <input id="addressCity" type="text" class="form-control" placeholder="输入医院所在城市">
                            <br>
                            <label for="addressCounty">所在国家</label>
                            <input id="addressCounty" type="text" class="form-control" placeholder="输入医院所在国家">
                            <br>
                            <label for="addressTown">所在城镇</label>
                            <input id="addressTown" type="text" class="form-control" placeholder="输入医院所在城镇">
                            <br>
                            <label for="addressDetail">具体地址</label>
                            <input id="addressDetail" type="text" class="form-control" placeholder="输入医院具体地址">
                            <br>
                        </div>
                        <div class="box-body" style="padding: 10px">
                            <label for="introduce">相关介绍</label>
                            <textarea id="introduce" rows="5" class="form-control" style="resize: none; width: 100%"
                                      placeholder="输入医院相关介绍"></textarea>
                            <br>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToUpdate" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--详情-模态框（Modal）-->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
     aria-hidden="true">
    <div class="modal-dialog"  style="width: 1000px">
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="detailModalLabel">
                    详细信息
                </h4>
            </div>

            <table>
                <td style="width: 500px; text-indent: 4em">
                    <p id="d_id"></p>
                    <p id="d_name"></p>
                    <p id="d_phoneNumber"></p>
                    <p id="d_nature"></p>
                    <p id="d_hospitalType"></p>
                    <p id="d_grade"></p>
                </td>
                <td>
                    <p id="d_address"></p>
                    <p id="d_addressProvince"></p>
                    <p id="d_addressCity"></p>
                    <p id="d_addressCounty"></p>
                    <p id="d_addressTown"></p>
                    <p id="d_addressDetail"></p>
                </td>
                <p id="d_introduce"></p>
            </table>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">

    <script>
        //删除
        $("#delModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            // alert(JSON.stringify(button))
            var id = button.data('id') //取得data-id 的值
            var modal = $(this)
            modal.find('.modal-body p').text('确定要删除编号为 ' + id + "的医院信息吗")
            modal.find('.modal-body input').val(id)
        })
        $("#sureToDel").click(function () {
            var idDel = $("#idDel").val()
            $.post(
                "/contents/hospital/delete",
                {id: idDel},
                function () {
                    alert("删除成功")
                    $("#test").load(location.href + "#test");
                }
            )
        })

        //编辑
        $("#editModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/contents/hospital/selectById",
                {id: id},
                function (data) {
                    var hospital = data.value;
                    modal.find('#id').val(hospital.id)
                    modal.find('#name').val(hospital.name)
                    modal.find('#nature').val(hospital.nature)
                    modal.find('#hospitalType').val(hospital.hospitalType)
                    modal.find('#grade').val(hospital.grade)
                    modal.find('#phoneNumber').val(hospital.phoneNumber)
                    modal.find('#address').val(hospital.address)
                    modal.find('#addressProvince').val(hospital.addressProvince)
                    modal.find('#addressCity').val(hospital.addressCity)
                    modal.find('#addressCounty').val(hospital.addressCounty)
                    modal.find('#addressTown').val(hospital.addressTown)
                    modal.find('#addressDetail').val(hospital.addressDetail)
                    modal.find('#introduce').val(hospital.introduce)
                }
            )
        })
        $("#sureToUpdate").click(function () {
            $.post(
                "/contents/hospital/update",
                {
                    id: $("#id").val(),
                    name: $("#name").val(),
                    phoneNumber: $("#phoneNumber").val(),
                    nature: $("#nature").val(),
                    hospitalType: $("#hospitalType").val(),
                    grade: $("#grade").val(),
                    address: $("#address").val(),
                    addressProvince: $("#addressProvince").val(),
                    addressCity: $("#addressCity").val(),
                    addressCounty: $("#addressCounty").val(),
                    addressTown: $("#addressTown").val(),
                    addressDetail: $("#addressDetail").val(),
                    introduce: $("#introduce").val(),
                },
                function (data) {
                    if(data.code==200){
                        alert("修改成功");
                        $("#test").load(location.href + "#test");
                    }

                    else
                        alert("修改失败")
                }
            )
        })

        //详细信息
        $("#detailModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/contents/hospital/selectById",
                {id: id},
                function (data) {
                    var hospital = data.value;
                    modal.find('#d_id').text("医院编号：" + hospital.id)
                    modal.find('#d_name').text("医院名称：" + hospital.name)
                    modal.find('#d_phoneNumber').text("联系电话：" + hospital.phoneNumber)
                    modal.find('#d_nature').text("类型：" + hospital.nature)
                    modal.find('#d_hospitalType').text("医院类型：" + hospital.hospitalType)
                    modal.find('#d_grade').text("医院等级：" + hospital.grade)
                    modal.find('#d_address').text("地址：" + hospital.address)
                    modal.find('#d_addressCounty').text("所在区：" + hospital.addressCounty)
                    modal.find('#d_addressProvince').text("所在省份：" + hospital.addressProvince)
                    modal.find('#d_addressCity').text("所在城市：" + hospital.addressCity)
                    modal.find('#d_addressTown').text("所在城镇：" + hospital.addressTown)
                    modal.find('#d_addressDetail').text("具体地址：" + hospital.addressDetail)
                }
            )
        })
    </script>

    <script src="/static/common/assets/vendor/paginator/bootstrap-paginator.min.js"></script>
    <script>
        $("#search").click(function () {
            var id = $("#searchId").val();
            if ($.trim(id) == "") {
                $("#test").load("/test/hospitalInfo?page=1");//重新加载整个<body>,定位到第一页
            }
            else if (id != "") {
                $.get(
                    "/contents/hospital/selectById",
                    {id: id},
                    function (data) {
                        $("#tbody").html("");
                        $("#paginationBar").html("");
                        var hospital = data.value;

                        var str =
                            "<tr>" +
                            "<td style=\"width: 10%\" >" + hospital.id + "</td>\n" +
                            "<td style=\"width: 20%\" >" + hospital.name + "</td>\n" +
                            "<td style=\"width: 10%\" >" + hospital.address + "</td>\n" +
                            "<td style=\"width: 20%\" >" + hospital.address + "</td>\n" +
                            "<td style=\"width: 20%\" >" + hospital.phoneNumber + "</td>\n" +
                            "<td style=\"width: 10%\" >\n" +
                            "    <nobr>\n" +
                            "        <button th:id=detail" + hospital.id + " class=\"btn btn-successbtn-sm\" style=\"padding: 6px\" data-id=" + hospital.id + " data-target=\"#detailModal\" data-toggle=\"modal\">详情</button>\n" +
                            "        <button th:id=edit" + hospital.id + " class=\"btn btn-primary btn-sm\" style=\"padding: 6px\" data-id=" + hospital.id + " data-target=\"#editModal\" data-toggle=\"modal\">编辑</button>\n" +
                            "        <button id=del" + hospital.id + " class=\"btn btn-danger btn-sm\" style=\"padding: 6px\"   data-id=" + hospital.id + " data-target=\"#delModal\" data-toggle=\"modal\">删除</button>\n" +
                            "    </nobr>\n" +
                            "</td>"
                        "</tr>";

                        $("#tbody").html(str);

                    }
                )
            }
        })
    </script>

    <script th:inline="javascript" type='text/javascript'>
        var max = [[${maxPage}]];
        var cur = [[${currentPage}]];
        $('#pageLimit').bootstrapPaginator({
            currentPage: cur,
            totalPages: max,
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 5,
            // pageUrl:function(type, page, current){
            //     return "/test/hospitalInfo?page="+page
            // },
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },//改写分页按钮字样
            onPageClicked: function (event, originalEvent, type, page) {
                //根据点击的页面，刷新整个body
                $("#test").load("/test/hospitalInfo?page=" + page);
            }
        });
    </script>


</div>

</html>